<template>
  <button 
    class="advanced-btn" 
    :class="[
      `advanced-btn--${type}`, 
      `advanced-btn--${size}`,
      { 
        'advanced-btn--block': block,
        'advanced-btn--disabled': disabled,
        'advanced-btn--loading': loading,
        'advanced-btn--round': round,
        'advanced-btn--circle': circle
      }
    ]" 
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="advanced-btn__loading"></span>
    <span v-if="icon && !loading" class="advanced-btn__icon">
      <component :is="icon" />
    </span>
    <span class="advanced-btn__content">
      <slot></slot>
    </span>
  </button>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  type: {
    type: String,
    default: 'default', // default, primary, success, warning, danger, info
    validator(value) {
      return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value);
    }
  },
  size: {
    type: String,
    default: 'medium', // mini, small, medium, large
    validator(value) {
      return ['mini', 'small', 'medium', 'large'].includes(value);
    }
  },
  block: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  icon: {
    type: [String, Object],
    default: ''
  }
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
  emit('click', event)
}
</script>

<style scoped>
.advanced-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: var(--transition-base);
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0 15px;
  height: 32px;
  font-size: var(--font-size-small);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.advanced-btn:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.advanced-btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.advanced-btn--primary:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  background-color: #40a9ff;
  border-color: #40a9ff;
  color: var(--color-white);
}

.advanced-btn--success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.advanced-btn--success:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  background-color: #73d13d;
  border-color: #73d13d;
  color: var(--color-white);
}

.advanced-btn--warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-white);
}

.advanced-btn--warning:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  background-color: #ffc53d;
  border-color: #ffc53d;
  color: var(--color-white);
}

.advanced-btn--danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

.advanced-btn--danger:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  background-color: #ff7875;
  border-color: #ff7875;
  color: var(--color-white);
}

.advanced-btn--info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-white);
}

.advanced-btn--info:hover:not(.advanced-btn--disabled):not(.advanced-btn--loading) {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
  color: var(--color-white);
}

.advanced-btn--mini {
  height: 24px;
  padding: 0 7px;
  font-size: var(--font-size-extra-small);
}

.advanced-btn--small {
  height: 28px;
  padding: 0 11px;
  font-size: var(--font-size-small);
}

.advanced-btn--large {
  height: 40px;
  padding: 0 19px;
  font-size: var(--font-size-medium);
}

.advanced-btn--block {
  display: flex;
  width: 100%;
}

.advanced-btn--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.advanced-btn--loading {
  cursor: not-allowed;
  opacity: 0.8;
}

.advanced-btn--round {
  border-radius: 20px;
}

.advanced-btn--circle {
  border-radius: 50%;
  padding: 0;
  width: 32px;
}

.advanced-btn--circle.advanced-btn--mini {
  width: 24px;
}

.advanced-btn--circle.advanced-btn--small {
  width: 28px;
}

.advanced-btn--circle.advanced-btn--large {
  width: 40px;
}

.advanced-btn__loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s linear infinite;
  margin-right: 8px;
}

.advanced-btn--default .advanced-btn__loading {
  border-color: var(--color-primary);
  border-top-color: transparent;
}

.advanced-btn__icon {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.advanced-btn__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 按钮波纹效果 */
.advanced-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  opacity: 0;
}

.advanced-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .advanced-btn--circle {
    width: 30px;
  }
  
  .advanced-btn--circle.advanced-btn--large {
    width: 36px;
  }
}
</style>